<template>
<div v-show="op.cur_user.id != null" class="user-info">
  <img 
    style="width: 80px; height: auto; border-radius: 50%;" 
    :src="'http://localhost:82/my/static/wbimg2/' + op.cur_user.photo"
    alt="User Photo"
  >
  <span>{{ op.cur_user.nickName }}</span>
  <button @click="logot()" class="action-btn">注销</button>
  <router-link to="/att">
    <button class="action-btn follow-list-btn">关注列表</button>
  </router-link>
</div>


  <div v-show="op.cur_user.id==null">
      <router-link to="/login"><el-button type="primary">登录</el-button></router-link>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import u from '../stores/userStore.js'

var m = JSON.parse(sessionStorage.getItem("mc"))
// console.log(m.photo);
const op = u()
// console.log(op.cur_user);

const router = useRouter()
function logot(){
    op.clearUser();
    router.push('/')
}
</script>

<style>
.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.user-info img {
  width: 80px;
  height: auto;
  border-radius: 50%;
}

.user-info span {
  font-size: 1.1em;
  color: #333;
}

.action-btn {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.action-btn:hover {
  background-color: #45a049;
}

.follow-list-btn {
  background-color: #007bff;
}

.follow-list-btn:hover {
  background-color: #0056b3;
}
</style>